<script>
import { reactive, ref } from 'vue';
import 'vant/es/toast/style';
import { Toast } from 'vant';
// import { Popup } from 'vant';
export default {
    // 组合式api
    setup() {
        const show = ref(false);
        let obj = reactive({
            dolllist: [],
            beginx: false,
            paus: false,
            ropeh: false,
            done1: true,
            done2: true,
            done3: true,
            done4: true,
            getdoll: '',
            coins: false,
            coinsub: false,
            coinsnum: 0,
            play: false,
            // show: false,
            win: false
            // xx:''
        })

        let rope = ref(null)
        let act = ref(null)
        let doll1 = ref(null)
        let doll2 = ref(null)
        let doll3 = ref(null)
        let doll4 = ref(null)

        let coinsFun = () => {
            // console.log("投币");
            if (obj.coins != true) {
                obj.coins = true
                obj.coinsnum += 1
                setTimeout(() => {
                    obj.coins = false
                }, 1000)
            }
        }

        let showPopup = () => {
            show.value = true;
        }

        let beginFun = () => {//开始摇动抓钩

            if (obj.play != true && obj.coinsnum != 0) {
                obj.coinsnum -= 1
                obj.getdoll = ''
                obj.beginx = true
                obj.play = true
                obj.coinsub = true
                setTimeout(() => {
                    obj.coinsub = false
                }, 1000)
            } else if (obj.coinsnum == 0) {
                Toast.fail('请投币');
            }

            // console.log(obj.show);
        }
        window.localStorage.setItem("doll", JSON.stringify(obj.dolllist));
        obj.dolllist = JSON.parse(window.localStorage.getItem("doll"));

        let sureFun = () => {//绳子伸缩

            if (obj.play) {
                obj.paus = true//暂停动画
                obj.ropeh = true//绳子动画

                setTimeout(() => { //触底执行事件

                    let d1leftside = doll1.value.offsetLeft - 40 //娃娃左边距+钩子图片一半的宽度
                    let d1rightside = doll1.value.offsetLeft + doll1.value.offsetWidth - 40

                    let d2leftside = doll2.value.offsetLeft - 40 //娃娃左边距+钩子图片一半的宽度
                    let d2rightside = doll2.value.offsetLeft + doll2.value.offsetWidth - 40

                    let d3leftside = doll3.value.offsetLeft - 40 //娃娃左边距+钩子图片一半的宽度
                    let d3rightside = doll3.value.offsetLeft + doll3.value.offsetWidth - 40

                    let d4leftside = doll4.value.offsetLeft - 40 //娃娃左边距+钩子图片一半的宽度
                    let d4rightside = doll4.value.offsetLeft + doll4.value.offsetWidth - 40


                    if (act.value.offsetLeft + 30 >= d1leftside && act.value.offsetLeft + 30 <= d1rightside) {
                        obj.done1 = false
                        obj.getdoll = doll1.value.currentSrc
                        console.log("抓到啦");
                    } else if (act.value.offsetLeft + 30 >= d2leftside && act.value.offsetLeft + 30 <= d2rightside) {
                        obj.done2 = false
                        obj.getdoll = doll2.value.currentSrc
                        console.log("抓到啦");
                    } else if (act.value.offsetLeft + 30 >= d3leftside && act.value.offsetLeft + 30 <= d3rightside) {
                        obj.done3 = false
                        obj.getdoll = doll3.value.currentSrc
                        console.log("抓到啦");
                    } else if (act.value.offsetLeft + 30 >= d4leftside && act.value.offsetLeft + 30 <= d4rightside) {
                        obj.done4 = false
                        obj.getdoll = doll4.value.currentSrc
                        console.log("抓到啦");
                    } else {
                        console.log("什么都没抓到");
                    }


                }, 1000)//绳子动画的一半时间

                setTimeout(() => {//控制初始化
                    if (obj.getdoll) {//将娃娃存入本地
                        // dolllist
                        obj.dolllist.push(obj.getdoll)
                        // console.log(obj.dolllist.length);
                        window.localStorage.setItem("doll", JSON.stringify(obj.dolllist));
                    }

                    show.value = true;
                    obj.beginx = false
                    obj.paus = false
                    obj.ropeh = false
                    obj.play = false
                }, 3000)
                // console.log(obj.paus);
            }
        }

        return {
            obj,
            rope,
            act,
            show,
            doll1,
            doll2,
            doll3,
            doll4,
            coinsFun,
            beginFun,
            sureFun,
            showPopup,

        }
    },
}
</script>

<template>
    <!-- <div class="navbar-wrap">
            <div class="Navbarold">
                <nav>
                    <router-link custom to="/activitylist" v-slot="{ href, navigate, isActive }">
                        <div class="navbar-logo">
                            <span :href="href" @click="navigate" :class="[isActive && 'router-link-active']"
                                class="navbar-back"></span>
                        </div>

                    </router-link>
                    <div class="navbar-title">猫眼电影</div>
                    <div class="navbar-button"></div>
                </nav>
            </div>
        </div> -->
    <div class="activity">

        <router-link custom to="/activitylist" v-slot="{ href, navigate, isActive }">
            <div class="back" :href="href" @click="navigate" :class="[isActive && 'router-link-active']">
                <span>离开</span>
            </div>
        </router-link>

        <div class="dollMachine">
            <div class="act-side">
                <img src="../assets/images/act-side.gif" alt="">
            </div>
            <div class="act-top">
                <img src="../assets/images/act-top.png" alt="">
            </div>
            <div class="act-bg">
                <img src="../assets/images/act-bg.png" alt="">
            </div>
            <div class="act-left">
                <img src="../assets/images/act-left.png" alt="">
            </div>
            <div class="act-right">
                <img src="../assets/images/act-right.png" alt="">
            </div>
            <div class="act-staves">
                <img src="../assets/images/act-staves.png" alt="">
            </div>
            <!-- :class="['todo',item.completed?'completed':'', item.editflag?'editing':'']" -->
            <div :class="['act-paw', obj.beginx ? ' animat-act' : '', obj.paus ? 'paus' : '']" ref="act"
                :style="[obj.paus ? 'animation-play-state: paused;' : '']">
                <img src="../assets/images/act-rope.png" alt="" :class="['rope', obj.ropeh ? 'animat-rope' : '']"
                    ref="rope">
                <img src="../assets/images/act-paw.png" alt="" class="paw" ref="paw">
                <img :src="obj.getdoll" alt="" style="width: 100px;height: 100px;" class="getdoll"
                    v-if="obj.getdoll != ''">
            </div>
            <div class="act-main">
                <div class="begin" @click="beginFun">
                    <span :class="[obj.coinsub ? 'coins' : '']">
                        <img src="../assets/images/硬币.png" alt="">
                        <i>-1</i>
                    </span>
                </div>
                <div class="sure" @click="sureFun"></div>
                <div class="coinspoint" @click="coinsFun">
                    <!-- :class="[obj.coins ? 'coins' : '']" -->
                    <span :class="[obj.coins ? 'coins' : '']">
                        <img src="../assets/images/硬币.png" alt="">
                        <i>+1</i>
                    </span>
                </div>
                <div class="coinsnum">
                    <img src="../assets/images/硬币.png" alt="">
                    <span>×{{ obj.coinsnum }}</span>
                </div>
                <img src="../assets/images/act-main.png" alt="">
            </div>
            <!-- 娃娃 -->
            <img src="../assets/images/act-doll1.png" alt="" style="width: 100px;height: 100px;" class="doll1"
                ref="doll1" v-show="obj.done1">
            <img src="../assets/images/act-doll2.png" alt="" style="width: 100px;height: 100px;" class="doll2"
                ref="doll2" v-show="obj.done2">
            <img src="../assets/images/act-doll3.png" alt="" style="width: 100px;height: 100px;" class="doll3"
                ref="doll3" v-show="obj.done3">
            <img src="../assets/images/act-doll4.png" alt="" style="width: 100px;height: 100px;" class="doll4"
                ref="doll4" v-show="obj.done4">

            <van-popup v-model:show="show" round :style="{ height: '60%' }"
                style="overflow: visible;border: 5px solid #418cf5;background: #fff;">
                <div class="prompt">
                    <div class="wincard" v-if="obj.getdoll != ''">
                        <img src="../assets/images/act-bgtop.png" alt="" class="cardtop">
                        <div class="dollname">
                            <span>恭喜您抓到了</span>
                        </div>
                        <img :src="obj.getdoll" alt="" style="width: 150px;height: 150px;" class="dollmain">
                        <div class="but" @click="show = false;">
                            <span>确定</span>
                        </div>
                    </div>
                    <div class="card" v-if="obj.getdoll == ''">
                        <div class="cardmain">
                            失败了
                            <span>↓</span>
                        </div>

                        <div class="but" @click="show = false;">
                            <span>再来一次</span>
                        </div>
                    </div>

                </div>
            </van-popup>
        </div>
    </div>
</template>

<style lang="less">
.activity {
    height: 100%;

    .back {
        position: fixed;
        top: 0px;
        left: 0px;
        padding: 10px 20px;
        background-color: #f38c4d;
        color: #fff;
        border-radius: 0 0 15px 0;
        font-size: 15px;
        z-index: 10;
    }

    .navbar-wrap {
        .Navbarold {
            background-color: #e54847 !important;
            height: 38px;
            overflow: hidden;
            position: relative;
            padding: 6px;
            box-sizing: content-box;

            &>nav {
                width: 100%;
                display: -webkit-box;

                .navbar-logo {
                    width: 100px;
                    background-size: 37%;

                    .navbar-back {
                        width: 36px;
                        height: 36px;
                        display: block;
                        z-index: 999;

                        &::after {
                            content: '';
                            position: absolute;
                            width: 13px;
                            height: 13px;
                            top: 16px;
                            left: 12px;
                            transform: rotate(45deg);
                            border: 2px solid #fff;
                            border-width: 0 0 2px 2px;
                        }
                    }
                }

                .navbar-title {
                    -webkit-box-flex: 1;
                    color: #fff;
                    font-size: 18px;
                    text-align: center;
                    line-height: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    position: relative;
                }

                .navbar-button {
                    position: relative;
                    width: 100px;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                }
            }
        }
    }

    .dollMachine {
        height: 100%;
        overflow: hidden;
        position: relative;

        .act-side {
            position: absolute;
            top: 0;
            z-index: 1;
            width: 100%;
        }

        .act-top {
            position: absolute;
            top: 0;
            z-index: 2;
        }

        .act-main {
            position: absolute;
            bottom: -50px;
            z-index: 2;

            .coinsnum {
                position: absolute;
                top: 165px;
                left: 223px;
                display: flex;
                align-items: center;

                img {
                    width: 25px;
                    height: 25px;
                }
            }

            .coinspoint {
                width: 30px;
                height: 50px;
                position: absolute;
                top: 147px;
                left: 45px;
                background-color: transparent;

                .coins {
                    //动画
                    // animation: doll1 8s infinite linear;
                    // animation: coins 1.2s  infinite linear;
                    animation: coins 1.2s ease-in-out 0s;
                    animation-iteration-count: 1;
                    animation-fill-mode: forwards;

                    @keyframes coins {
                        0% {
                            transform: translateY(0px);
                            opacity: 1;
                        }

                        100% {
                            transform: translateY(-20px);
                            opacity: 0;
                        }
                    }
                }

                span {
                    display: flex;
                    align-items: center;
                    position: absolute;
                    opacity: 0;
                    top: 0;

                    img {
                        width: 20px;
                        height: 20px;
                    }

                    i {
                        font-size: 14px;
                        font-weight: 600;
                        // color: #fee645;
                    }

                }

            }

            .begin {
                position: absolute;

                top: 25%;
                left: 49%;
                width: 50px;
                height: 50px;
                background-color: transparent;

                .coins {
                    //动画
                    // animation: doll1 8s infinite linear;
                    // animation: coins 1.2s  infinite linear;
                    animation: coins 1.2s ease-in-out 0s;
                    animation-iteration-count: 1;
                    animation-fill-mode: forwards;

                    @keyframes coins {
                        0% {
                            transform: translateY(0px);
                            opacity: 1;
                        }

                        100% {
                            transform: translateY(-20px);
                            opacity: 0;
                        }
                    }
                }

                span {
                    display: flex;
                    align-items: center;
                    position: absolute;
                    opacity: 0;
                    top: 0;

                    img {
                        width: 20px;
                        height: 20px;
                    }

                    i {
                        font-size: 14px;
                        font-weight: 600;
                        // color: #fee645;
                    }

                }
            }

            .sure {
                position: absolute;

                top: 25%;
                left: 72.5%;
                width: 50px;
                height: 50px;
                background-color: transparent;
            }
        }

        .act-bg {
            position: absolute;
            bottom: -50px;
            z-index: -1;
        }

        .act-left {
            width: 15px;
            position: absolute;
            // bottom: -50px;
            top: 0;
            left: 16%;
            z-index: 0;
        }

        .act-right {
            width: 15px;
            position: absolute;
            // bottom: -50px;
            top: 0;
            right: 16%;
            z-index: 0;
        }

        .act-staves {
            position: absolute;
            // bottom: -50px;
            top: 13%;
            width: 100%;
            height: 20px;
            // right: 16%;
            z-index: 0;
        }

        .paus {
            // background-color: #fff;
            animation-play-state: paused;
        }

        .animat-act {
            //动画
            animation: act 3s infinite;
            // animation-play-state: running;

            /* 动画关键帧 */
            @keyframes act {
                0% {
                    // top: 0px;
                    left: 0px;
                }

                50% {
                    // top: 250px;
                    left: 230px;

                }

                100% {
                    // top: 0px;
                    left: 0px;

                }
            }
        }

        .act-paw {

            position: absolute;
            top: 13%;
            left: 0;
            padding: 0 70px;

            .animat-rope {
                //动画
                animation: rope 3s;
                // animation-play-state: running;

                /* 动画关键帧 */
                @keyframes rope {
                    0% {
                        // top: 0px;
                        height: 50px;
                    }

                    50% {
                        // top: 250px;
                        height: 300px;

                    }

                    100% {
                        // top: 0px;
                        height: 50px;

                    }
                }
            }

            .rope {
                width: 5px;
                height: 50px;


            }

            .paw {
                position: absolute;
                left: 29px;
                bottom: -85px;
                width: 85px;
                height: 85px;
            }

            .getdoll {
                position: absolute;
                left: 22px;
                bottom: -145px;
            }
        }

        .doll1 {
            position: absolute;
            top: 400px;
            left: 900px;

            //动画
            animation: doll1 8s infinite linear;

            /* 动画关键帧 */
            @keyframes doll1 {
                0% {
                    // top: 0px;
                    left: 900px;
                }

                100% {
                    left: -100px;

                }
            }
        }

        .doll2 {
            position: absolute;
            top: 400px;
            left: 900px;
            //动画
            animation: doll1 8s infinite linear;
            animation-delay: 2s;

            /* 动画关键帧 */
            @keyframes doll1 {
                0% {
                    left: 900px;
                }

                100% {
                    left: -100px;
                }
            }
        }

        .doll3 {
            position: absolute;
            top: 400px;
            left: 900px;
            //动画
            animation: doll1 8s infinite linear;
            animation-delay: 4s;

            /* 动画关键帧 */
            @keyframes doll1 {
                0% {
                    left: 900px;
                }

                100% {
                    left: -100px;
                }
            }
        }

        .doll4 {
            position: absolute;
            top: 400px;
            left: 900px;
            //动画
            animation: doll1 8s infinite linear;
            animation-delay: 6s;

            /* 动画关键帧 */
            @keyframes doll1 {
                0% {
                    left: 900px;
                }

                100% {
                    left: -100px;
                }
            }
        }

        .prompt {
            width: 300px;

            position: relative;

            .wincard {
                margin: 20px;

                .cardtop {
                    width: 300px;
                    height: 138px;
                    position: absolute;
                    left: 0px;
                    top: -102px;
                }

                .dollname {
                    width: 270px;
                    height: 34px;
                    background-image: url(../assets/images/act-bgname.png);
                    background-size: cover;
                    // margin-top: 50px;
                    position: absolute;
                    left: 13px;
                    top: 40px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #fff;
                    letter-spacing: 2px;
                    font-weight: 600;
                }

                .dollmain {
                    position: absolute;
                    top: 105px;
                    // margin: 0 auto;
                    left: 80px;
                }

                .but {
                    width: 150px;
                    // height: 30px;
                    padding: 15px;
                    border-radius: 35px;

                    background-color: #418cf5;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: absolute;
                    top: 295px;
                    left: 60px;
                    color: #fff;
                    letter-spacing: 2px;
                    font-weight: 600;
                }
            }

            .card {
                .cardmain {
                    position: absolute;
                    top: 13px;
                    left: 140px;
                    // writing-mode:tb-rl;
                    width: 20px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    // text-align:center; 
                    font-size: 36px;
                    font-weight: 600;
                    line-height: 72px;

                }

                .but {
                    width: 150px;
                    // height: 30px;
                    padding: 15px;
                    border-radius: 35px;

                    background-color: #418cf5;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: absolute;
                    top: 315px;
                    left: 60px;
                    color: #fff;
                    letter-spacing: 2px;
                    font-weight: 600;
                }
            }

        }
    }
}
</style>